// constructing a key by hand
Key("K") // will convert "K" automatically to lower case -> Key(name = "k", ctrl = false, alt = false, shift = false, meta = false)
// same as
Key("k")
// set modifier states
Key("K", ctrl = true) // Key(name = "k", ctrl = true, alt = false, shift = false, meta = false)

// constructing a key from a KeyboardEvent
div {
    keydowns.map { Key(it) } handledBy { /* use Key-object for further processing */ }
    //                 ^^
    //                 use KeyboardEvent to construct a Key-object with all potentially modifier key states reflected!
}

// using predefined keys from Keys object
Keys.Enter // "real" Key
Keys.Alt // ModifierKey -> needs to be combined with a "real" key in order to use it for further processing
// the same but more cumbersome and open to typos
Key("Enter")
// not the same (!)
Key("Alt") // -> Key(name = "Alt", ..., alt = false)
Keys.Alt // -> ModifierKey-object with alt = true property!

// constructing a key with some modifier key
Key("K") + Keys.Control
// same result, but much more readable the other way round:
Keys.Control + "K"

// defining some common combination:
val searchKey = Keys.Control + Keys.Shift + "F"
//              ^^^^^^^^^^^^
//              You can start with a modifier key!
//              Appending a String to an ModifierKey will finally lead to a Key

val tabbing = setOf(Keys.Tab, Keys.Shift + Keys.Tab)

// API prevents accidently usage:
// won't compile!
Key("F") + Key("P") // cannot combine real keys!

// within some Tag<*or WithDomNode<*>

// do something only for some key shortcut combination
keydowns.keys(Keys.Strg + "K").map { } handledBy { /* popup some command entry component */ }

// accessing the event after the filtering:
keydowns.keys(Keys.ArrowUp, Keys.ArrowDown).mapNotNull { (key, e) ->
    e.preventDefault() // page should not scroll up or down in this case!
    when (key) {
        Keys.ArrowDown -> // create / modify something to be handled
        Keys.ArrowUp -> // create / modify something to be handled
        else -> null
    }
} handledBy { /* ... */ }